<template>
  <div class="form-element">
    <div class="col-md-12 padding-0">
      <div class="col-md-12">

        <div class="panel form-element-padding">
          <div class="panel-heading">
            <h4>我的机票</h4>
          </div>


          <div style="padding-left:160px">
            <!--          机票查询-->
            <el-form :model="ticketForm" ref="ticketForm">
              <el-select class="srcCity"
                         v-model="ticketForm.srcCity"

                         filterable
                         allow-create
                         default-first-option
                         placeholder="出发城市">
                <el-option
                  v-for="(item,index) in cities"
                  :key="index"
                  :value="item">
                </el-option>

              </el-select>&nbsp;
              <el-select class="dstCity"
                         v-model="ticketForm.dstCity"
                         filterable
                         allow-create
                         default-first-option
                         placeholder="目的城市">
                <el-option
                  v-for="(item,index) in cities"
                  :key="index"
                  :value="item">
                </el-option>
              </el-select>&nbsp;

              <el-date-picker
                v-model="ticketForm.startTime"
                type="date"
                placeholder="选择出发时间"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd">
              </el-date-picker>&nbsp;

              <el-button v-on:click="submitForm('ticketForm')" type="danger" plain>查询</el-button>&nbsp;
              <el-button v-on:click="resetForm('ticketForm')">重置</el-button>


            </el-form>
            <br>
            <!--            机票展示-->
          </div>
          <div class="container mar-bottom-30 " v-if="tickets.length>0">
            <el-table :data="tickets" style="width: 1000px">

              <el-table-column
                prop="srcAirport"
                label="出发机场"
                width="80px"
              >
              </el-table-column>
              <el-table-column
                prop="ticketId"
                label="机票id">
              </el-table-column>

              <el-table-column
                prop="flightId"
                label="航班号"
                width="80px"
              >
              </el-table-column>

              <el-table-column
                prop="seatId"
                label="座位号"
                width="80px"
              >
              </el-table-column>

              <el-table-column
                prop="departureTime"
                label="出发时间">
              </el-table-column>

              <el-table-column
                prop="boardTime"
                label="登机时间">
              </el-table-column>
              <el-table-column
                label="操作"
              width="80px">
                <template v-slot="scope">
                  <el-button type="info" :disabled="timeOut(scope.row.departureTime)" @click="unBook(scope.row.ticketId)">退票</el-button>
                </template>
              </el-table-column>

            </el-table>
          </div>



        </div>
      </div>
    </div>
  </div>


</template>

<script>
export default {
  name: "MyTickets",
  data() {
    return {
      ticketForm: {
        srcCity: null,
        dstCity: null,
        startTime: null,
        cardId: null,
      },
      cities: [
        "开放端口",
        "newYork"
      ],
      tickets: [],
      day1:null
    }

  },
  created() {
    this.day1=new Date().getTime()
    const _this = this
    this.$axios.get("http://localhost:8181/flight/loadCity")
      .then((resp) => {
        _this.cities = resp.data
      })
    this.ticketForm.cardId = JSON.parse(sessionStorage.getItem('passenger')).cardId

    this.$axios.post("http://localhost:8181/ticket/getTickets",this.ticketForm)
      .then((resp) => {
        _this.tickets = resp.data
      })

  },
  methods: {

    timeOut(time){
      let date = new Date(time)
      let timeStamp = date.getTime()
      if(timeStamp>this.day1){
        return false;
      }
      return true
    },

    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property]
      if (data == null) {
        return null
      }
      let dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
    },

    unBook(ticketId) {

      if(window.confirm('你确定要退票吗？')){
      }else{
        return false;
      }
      const _this = this
      this.$axios.post('http://localhost:8181/ticket/refund', {ticketId:ticketId})
        .then(function (resp) {
          const result = resp.data
          if(result=='success'){
            _this.$alert('退票成功', '消息', {
              confirmButtonText: '确定',
              callback: action => {
                window.location.reload()
              }
            })
          }
          else{
            _this.$message({
              type:'error',
              message:'该票已超时'
            })
          }
        })
      console.log(_this.tickets)
    },


    submitForm(formName) {
      const _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('http://localhost:8181/ticket/getTickets', this.ticketForm)
            .then(function (resp) {
              _this.tickets = resp.data
            })
          console.log(_this.tickets)
        }

      })
    },
    resetForm(formName) {
      this.ticketForm.startTime = null;
      this.ticketForm.srcCity = null;
      this.ticketForm.dstCity = null;
    },
    timeFormat(time) {
      var date = new Date(time);
      return formatDate(date, "hh:mm");
    },
    dateFormat(day) {
      var date = new Date(day);
      return formatDate(date, "MM-dd");
    },
  }

}
</script>

<style scoped>

</style>
